<template>
  <div class="hp_blog-login-box">
    <div class="hp_blog-content">
      <div style="margin-bottom: 20px;font-size: 20px;line-height: 60px;width: 100%;display: flex;align-items: center;justify-content: center;">
        hp-blog-admin
      </div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label-width="40px" label="账号">
          <el-input v-model="form.account"></el-input>
        </el-form-item>
        <el-form-item label-width="40px" label="密码">
          <el-input type="password" v-model="form.pwd"></el-input>
        </el-form-item>
        <el-form-item label-width="40px">
          <el-button @click="login" style="width: 215px" type="primary">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/login'
export default {
  name: 'login',
  data () {
    return {
      form: {
        account: null,
        pwd: null
      }
    }
  },
  methods: {
    /**
     * 登录
     */
    async login () {
      let res = await login(this.form)
      localStorage.setItem('token', res)
      this.$message.success('登录成功')
      this.$router.push({
        path: '/main/index'
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.hp_blog-login-box {
  width 100vw
  height 100vh
  display flex
  align-items center
  justify-content center
  .hp_blog-content {
    width 300px
    box-sizing border-box
    padding 20px
    border-radius 5px
  }
}
</style>
